<template>
  <el-dialog
    title="新增需求任务"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    destroy-on-close
    @close="close"
    width="30%"
  >
    <div class="form">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-position="left"
        label-width="80"
        size="small"
      >
        <el-row :gutter="5">
          <el-col :span="12">
            <quick-field-panel title="任务名称" required>
              <el-form-item prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入任务名称"
                  clearable
                >
                </el-input>
              </el-form-item>
            </quick-field-panel>
          </el-col>
          <el-col :span="12">
            <quick-field-panel title="项目需求" required>
              <el-form-item prop="project_demand_id">
                <el-select
                  v-model="form.project_demand_id"
                  placeholder="请选择"
                  clearable
                  filterabl
                >
                  <el-option
                    v-for="item in demandsOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="12">
            <quick-field-panel title="预估工作量" required>
              <el-form-item prop="work_load">
                <el-input
                  v-model.number="form.work_load"
                  placeholder="请输入预估工作量"
                  clearable
                >
                </el-input>
              </el-form-item>
            </quick-field-panel>
          </el-col>
          <el-col :span="12">
            <quick-field-panel title="负责人" required>
              <el-form-item prop="leader">
                <el-select
                  v-model="form.leader"
                  placeholder="请选择负责人"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in leaderOpt"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="12">
            <quick-field-panel title="计划开始时间" required>
              <el-form-item prop="plan_start_date">
                <el-date-picker
                  v-model="form.plan_start_date"
                  type="date"
                  placeholder="选择日期"
                  clearable
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsStart"
                >
                </el-date-picker>
              </el-form-item>
            </quick-field-panel>
          </el-col>

          <el-col :span="12">
            <quick-field-panel title="计划结束时间" required>
              <el-form-item prop="plan_end_date">
                <el-date-picker
                  v-model="form.plan_end_date"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsEnd"
                  clearable
                >
                </el-date-picker>
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>

        <quick-field-panel title="详细说明" required>
          <el-form-item prop="remark">
            <el-input
              type="textarea"
              v-model="form.remark"
              placeholder="详细说明"
              :rows="4"
              maxlength="200"
              show-word-limit
              clearable
            >
            </el-input>
          </el-form-item>
        </quick-field-panel>
      </el-form>
    </div>
    <span slot="footer">
      <el-button type="primary" :loading="loading" size="medium" @click="doAdd"
        >确 定</el-button
      >
      <el-button size="medium" plain @click="isShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import _api from "../../common/api/project_job";
import _demand from "../../common/api/project_demand";
import _project from "../../common/api/project";
import _module from "../../common/api/project_module";
import _employee from "@/common/api/employee";
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      isShow: false,
      demandsOption: [],
      form: {
        name: "",
        project_id: "",
        project_demand_id: "",
        plan_start_date: "",
        plan_end_date: "",
        leader: "",
        work_load: "",
        remark: "",
      },
      rules: {
        name: [{ required: true, message: "必填", trigger: "blur" }],
        leader: [{ required: true, message: "必填", trigger: "blur" }],
        plan_start_date: [{ required: true, message: "必填", trigger: "blur" }],
        plan_end_date: [{ required: true, message: "必填", trigger: "blur" }],
        remark: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 10, message: "详细说明十字以上", trigger: "blur" },
        ],
        work_load: [
          { required: true, message: "必填", trigger: "blur" },
          { type: "number", message: "必须为数字" },
        ],
        project_demand_id: [
          { required: true, message: "必填", trigger: "blur" },
        ],
      },
      leaderOpt: [],
      //限制开始时间和结束时间的关系
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.form.plan_end_date;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.form.plan_start_date;
          if (beginDateVal) {
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
    };
  },
  methods: {
    showDialog(project_id, demandsOption) {
      this.getEmployees();
      this.form.project_id = project_id;
      this.demandsOption = Object.assign([], demandsOption);
      this.isShow = true;
    },

    async doAdd() {
      this.loading = true;
      try {
        await this.$refs.form.validate(async (valid) => {
          if (valid) {
            await _api.addAsync(this.form);
            this.isShow = false;
            this.$emit("added", {});
          }
        });
      } finally {
        this.loading = false;
      }
    },

    // 获取负责人
    async getEmployees() {
      const condition = {
        page_index: 1,
        page_size: 999,
      };
      try {
        const result = await _employee.getListAsync(condition);
        this.leaderOpt = result.data.map((item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      } catch (error) {}
    },

    // 格式类型转换
    formFormat() {
      this.form.work_load = parseFloat(this.form.work_load);
    },

    close() {
      this.$refs.form.resetFields();
    },

    getNewDate() {
      const date = new Date();
      this.form.plan_start_date = moment(date).format("yyyy-MM-DD");
    },
  },
  mounted() {
    this.getNewDate();
  },
};
</script>

<style lang="scss" sooped>
.avatar-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 10px 0;
}

.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader .el-upload .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
